<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: mainHeight }' @scrolltoupper="" @scrolltolower="">
			<form>
				<view class="cu-bar search ">
					<view class="title padding-left">异常饲喂器SN</view>
					<view class="search-form round">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-grey padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="8" type="number" placeholder="SN" confirm-type="search"
							v-model="old_sn"></input>
					</view>
					<view class="action">
						<view @tap="onScan('old_sn')" class="flex justify-right text-xl">
							<text class="cuIcon-scan text-olive "></text>
						</view>
					</view>
				</view>

				<view class="cu-bar search ">
					<view class="title padding-left">换新饲喂器SN</view>
					<view class="search-form round">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-grey padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="8" type="number" placeholder="SN" confirm-type="search"
							v-model="new_sn"></input>
					</view>
					<view class="action">
						<view @tap="onScan('new_sn')" class="flex justify-right text-xl">
							<text class="cuIcon-scan text-olive "></text>
						</view>
					</view>
				</view>

				<!-- <view class="cu-form-group">
					<view class="title">异常饲喂器SN</view>
					<input placeholder="" maxlength="8" name="input"></input>
					<button class='cu-btn bg-green shadow'>扫码</button>
				</view>
				
				<view class="cu-form-group">
					<view class="title">换新饲喂器SN</view>
					<input placeholder="" maxlength="8" name="input"></input>
					<button class='cu-btn bg-green shadow'>扫码</button>
				</view> -->
				
				
				<view class="cu-form-group ">
					<view class="title">更换原因</view>
					<picker @change="PickerChange" :value="pickerIdex" :range="pickerData">
						<view class="picker">
							{{pickerIdex>-1?pickerData[pickerIdex]:''}}
						</view>
					</picker>
				</view>
				
				<view class="padding-xl padding-top-xl">
					<button @tap="onConfirm" class="cu-btn block bg-blue margin-tb-sm lg round">
						<text class=""></text> 确定</button>
				</view>
				
				<view class="padding-xl padding-top-xl">
					<i class="cuIcon-info text-orange"></i><text class="text-grey padding-left-sm text-sm">注意:请确保智能终端在线,异常饲喂器已经拆下且新的饲喂器已经安装接线。</text>
				</view>
						
			</form>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
		
				title: '',
				
				pickerData: ['黑屏', '运行异常', '无法启动'],
				pickerIdex:0,
				
				old_sn:'',
				new_sn:'',
				reason:'',
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 20 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 100 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("show feed_node_replace add_replace")
			uni.setNavigationBarTitle({
				title: '更换饲喂器'
			});
		},
		methods: {
			InputFocus() {
			},
			InputBlur() {
			},
			onKeyInput(){
			},
			PickerChange(e) {
				this.pickerIdex = e.detail.value
			},
			onConfirm(){
				this.reason = this.pickerData[this.pickerIdex]
				if(this.old_sn=="" || this.old_sn.length!=8 || isNaN(this.old_sn)){
					uni.showModal({
						title: "错误SN",
						content: "请仔细很对<异常饲喂器SN>是否填写正确",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				if(this.new_sn=="" || this.new_sn.length!=8 || isNaN(this.new_sn)){
					uni.showModal({
						title: "错误SN",
						content: "请仔细很对<换新饲喂器SN>是否填写正确",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '提示',
					content: '请注意,本次操作将会被系统记录,是否要继续?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.addReplaceNode()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			addReplaceNode(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Device/FeednodeReplace',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						old_sn: that.old_sn,
						new_sn: that.new_sn,
						reason:that.reason,
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						uni.navigateBack()
					} else {
						uni.showModal({
							title: "错误",
							content: res.msg,
							showCancel: false,
							confirmText: "确定"
						})
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			},
			
			onScan(type) {
				var that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType)
						console.log('条码内容：' + res.result)
						
						var code = res.result
						var idx = code.indexOf('MXCSWQ_')
						if(idx<0)
						{
							idx = code.indexOf('MXCZLQ_')
						}
						if (idx >= 0) {
							var sn_arr = code.split("_")
							if (sn_arr.length != 2) {
								uni.showModal({
									title: "错误的条码",
									content: "请扫码设备屏幕/标签上正确的条码",
									showCancel: false,
									confirmText: "确定"
								})
							} else {
								var sn = sn_arr[1]
								//判断sn是否有权限
						
								if(type=="old_sn"){
									that.old_sn = sn
								}else{
									that.new_sn = sn
								}
							}
						
						} else {
							uni.showModal({
								title: "错误的条码",
								content: "请扫码设备屏幕/标签上正确的条码",
								showCancel: false,
								confirmText: "确定"
							})
						}
					}
				});

				
			},
			
		}
	}
</script>

<style>
	.title {
	    text-align: justify;
	    padding-right: 16px;
	    font-size: 16px;
	    position: relative;
	    height: 33px;
	    line-height: 33px;
	    color: #aaa;
	}
	.cu-form-group {
	    background-color: transparent;
	    padding: 0.5px 16px;
	    display: flex;
	    align-items: center;
	    min-height: 55px;
	    justify-content: space-between;
	    border: 0px;
	}
	.cu-form-group uni-picker .picker {
	    color: #fff;
	}
</style>
